<template>
  <create-view
    :body-style="{ height: '100%'}">
    <flexbox
      :loading="loading"
      direction="column"
      class="create-container">
      <flexbox class="create-header">
        <flexbox-item class="create-header_title">
          {{ Object.keys(editData).length > 0 ? '编辑' : '新建' }}仓库
        </flexbox-item>
        <i
          class="el-icon-close create-header_close"
          @click="handleClose" />
      </flexbox>

      <flexbox-item
        style="margin-left: 0"
        class="create-body">

        <create-sections title="基本信息">
          <wk-form
            ref="wkFormBase"
            :model="baseForm"
            :rules="baseRules"
            :field-from="baseForm"
            :field-list="fieldList"
            label-position="top" />
        </create-sections>
      </flexbox-item>

      <div class="create-footer">
        <el-button
          type="primary"
          @click="handleSave">
          保存
        </el-button>
        <el-button @click="handleClose">
          取消
        </el-button>
      </div>
    </flexbox>
  </create-view>
</template>

<script>
/**
 * Create by yxk at 2020/6/12
 */
import { jxcWarehouseAddOrUpdateAPI } from '@/api/jxc/warehouse'
import CreateView from '@/components/CreateView'
import CreateSections from '@/components/CreateSections'
import WkForm from '@/components/NewCom/WkForm'

export default {
  name: 'CreateWarehouse',
  components: {
    CreateView,
    CreateSections,
    WkForm
  },
  props: {
    editData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      baseForm: {},
      baseRules: {
        warehouseName: [{
          required: true,
          message: '仓库名称不能为空',
          trigger: 'blur'
        }],
        warehouseCode: [{
          required: true,
          message: '仓库编码不能为空',
          trigger: 'blur'
        }],
        warehouseIsuse: [{
          required: true,
          message: '请选择仓库状态',
          trigger: 'change'
        }]
      },
      fieldList: [
        {
          field: 'warehouseName',
          formType: 'text',
          name: '仓库名称'
        },
        {
          field: 'warehouseCode',
          formType: 'text',
          name: '仓库编码'
        },
        {
          field: 'warehouseIsuse',
          formType: 'select',
          name: '仓库状态',
          setting: ['启用', '停用']
        },
        {
          field: 'warehouseAddress',
          formType: 'text',
          name: '仓库地址'
        }
      ]
    }
  },
  watch: {
    editData: {
      handler(val) {
        let str = ''
        if (!val.warehouseIsuse) {
          str = '启用'
        } else {
          str = val.warehouseIsuse == 1 ? '启用' : '停用'
        }
        this.baseForm = {
          ...val,
          warehouseIsuse: str
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 关闭表单
     */
    handleClose() {
      this.$emit('close')
    },
    handleSave() {
      this.loading = true
      const instance = this.$refs.wkFormBase.instance

      instance.validate(valid => {
        if (valid) {
          const params = {
            ...this.baseForm,
            warehouseIsuse: this.baseForm.warehouseIsuse === '启用' ? 1 : 0
          }
          delete params.companyId

          jxcWarehouseAddOrUpdateAPI(params, Boolean(params.warehouseId)).then(() => {
            this.$emit('update')
            this.$message.success('保存成功')
            this.handleClose()
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          // 弹出第一个错误
          this.loading = false
          if (instance.fields) {
            for (
              let index = 0;
              index < instance.fields.length;
              index++
            ) {
              const ruleField = instance.fields[index]
              if (ruleField.validateState == 'error') {
                this.$message.error(ruleField.validateMessage)
                break
              }
            }
          }
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

  .create-container {
    position: relative;
    height: 100%;
    .create-header {
      height: 40px;
      margin-bottom: 20px;
      padding: 0 10px;
      .create-header_title {
        font-size: 17px;
        color: #333;
        font-weight: bold;
      }
      .create-header_close {
        font-size: 24px;
        color: #999;
        cursor: pointer;
        &:hover {
          color: $xr-color-primary;
        }
      }
    }

    .create-body {
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;

      /deep/ .create-sections-content {
        margin-top: 15px;
      }

      .wk-form {
        // margin: 0;
      }
    }

    .create-footer {
      width: 100%;
      text-align: right;
      margin-top: 5px;
      .el-button {
        margin-left: 0;
        margin-right: 20px;
      }
    }
  }
</style>
